<template>
	<!-- 商品详情页 -->
	<div class="detail">
		<!-- <div class="select">
			<span><input type="text" placeholder="请输入内容"><button>查找</button></span>
		</div>
		<div class="cen">
			<div class="cen_left">
				<ul>
					<li @click="all()">全部商品类型<i>></i></li>
					<li v-for="(item,index) in type" :key="item.id" @click="btn(index+1)">{{item.type}}<i>></i></li>
				</ul>
			</div>
			<div class="cen_right">
				<ol>
					<li v-for="it in list" :key="it.id">
						<img :src="`${$Imgurl}/api/public/showImg/${it.picture}`">
						<div class="list">
							<p>{{it.name}}</p>
							<p>{{it.author}}</p>
							<p>{{it.publisher}}</p>
							<p>￥{{it.price}}<button>购买</button></p>
						</div>
					</li>
				</ol>
				
			</div>
		</div> -->
		<el-container>
			<el-header style="margin-top: 80px;">
				<el-button type="danger">请输入查询内容</el-button>
				<input type="text" v-model="key" placeholder="请输入内容" style="width: 70%;line-height: 38px;border: 1px solid gainsboro;border-radius: 6px;outline: none;text-indent: 1em;margin-right: 0.5%;" >
				<!-- <el-input v-model="input" size="small" placeholder="请输入内容" /> -->
				<el-button type="danger" @click="queryS()"><el-icon><Search /></el-icon></el-button>
				<hr style="border-color: gainsboro;"/>
			</el-header>
		</el-container>
		<el-container>
			<el-aside>
				<el-menu>
					<el-menu-item index="index" style="color: #66B1FF;" @click="btn(0)">所有类型的商品</el-menu-item>
				</el-menu>
				<el-menu v-for="(item,index) in newMenus" :key="item.id">
					<el-menu-item   index="index" style="color: #66B1FF;" @click="btn(item.id)">
						<template #title ><!-- 用户管理 --></template>
						{{item.type}}
					</el-menu-item>
					<el-tag v-for="it in newMenus[index].child" :key="it.id" style="border: 0;color: #6bc8ff;background-color: white;cursor: pointer;" @click='btn(it.id)'>{{it.type}}</el-tag>
				</el-menu>
			</el-aside>
			<el-main>
				<!-- Main -->
				<div class="cen_right">
					<ol>
						<li v-for="ito in rightList" :key="ito.id">
							<img :src="`${$Imgurl}/api/public/showImg/${ito.picture}`">
							<div class="list">
								<p v-html="ito.name"></p>
								<p v-html="ito.author"></p>
								<p v-html="ito.publisher"></p>
								<p>￥{{ito.price}}<button @click="buy(ito)">购买</button></p>
							</div>
						</li>
					</ol>
					<div class="block" v-show="total>num">
						<el-pagination layout="prev, pager, next" :total="total" :page-size="num" @current-change="current_change" :current-page="start"></el-pagination>
					</div>
				</div>
				
			</el-main>
		</el-container>
		
	</div>
</template>

<script>
	import { Search } from '@element-plus/icons-vue';
	import instance from '../../../ajax/index.js';
	export default{
		name : 'Detail',
		components:{
			Search
		},
		data(){
			return {
				type : [],
				newMenus : [],
				rightList : [],
				total : 0,
				// 当前页数
				start : 1,
				// 每页条数
				num : 8,
				onType : 0,
				searchStr : '',
				key : '',
				queryList : []
				// pagesize: 4,
				// currentPage : 1
			}
		},
		created(){
			this.key = this.$route.query.key;
			console.log(this.key);
			this.queryS();
			this.axios.get( 'api/public/type/findAll2' ).then( (res)=>{
				this.type = res.data.data;
				this.getMenu( 0 , this.newMenus );
				// console.log(this.newMenus[0].child);
			} ).catch( (error)=>{
				console.log(error);
			} );
		},
		methods:{
			buy( val ){
				let token = localStorage.getItem( 'token' );
				if( token == '' ){
					this.$message.warning({
						message : '请登录账号',
						offset : 80
					});
				}else{
					instance.post( 'http://127.0.0.1:8093/api/public/addCart/'+val.id ).then( (res)=>{
						// console.log(res);
						if( res.data.code == 200 ){
							this.$message.success({
								message : '添加购物车成功',
								offset : 80
							});
						}
					} ).catch( (error)=>{
						console.log(error);
					} )
				}
				
			},
			queryS(){
				// console.log(this.key);
				if( this.key != '' ){
					this.axios.post( 'http://127.0.0.1:8093/api/public/book/findIf/0/8' , 'key='+this.key , {
						headers : { 'Content-Type' : 'application/x-www-form-urlencoded' }
					} ).then( (res)=>{
						// console.log(res.data.data.books);
						this.rightList = res.data.data.books;
					} ).catch( (error)=>{
						console.log(error);
					} );
				}
			},
			getMenu( id , arr ){
				if( id === 0 ){
					this.type.forEach( item => {
						if( item.pid === 0 ){
							arr.push( item );
						}
					} )
					this.getMenu( this.newMenus[0].id , this.newMenus );
				}else{
					arr.forEach( ( item , i )=>{
						this.type.forEach( (val)=>{
							if( item.id === val.pid ){
								if( !item.child )	item.child = [];
								item.child.push( val );
							}
						} );
						if( item.child ){
							this.getMenu( 1 , item.child );
						}
					} );
				}
			},
			btn( val ){
				// console.log(val);
				this.axios.get( 'http://127.0.0.1:8093/api/public/findBookByPage/0/8/'+val ).then( (res)=>{
					// console.log(res.data.data.books);
					this.rightList = res.data.data.books;
					this.total = res.data.data.total;
				} ).catch( (error)=>{
					console.log(error);
				} )
			},
			current_change( n ){
				this.start = n;
				if( this.onType >= 0 ){
					this.axios.get( 'http://127.0.0.1:8093/api/public/findBookByPage/'+(n-1)+'/'+this.num+'/'+this.onType ).then( (res)=>{
						// console.log(res);
						this.rightList = res.data.data.books;
						this.total = res.data.data.total;
					} ).catch( (error)=>{
						console.log(error);
					} )
				}
				if( this.onType < 0 ){
					this.axios.post( 'http://127.0.0.1:8093/api/public/book/findIf/'+( n - 1 )+'/'+this.num , {
						key:this.searchStr
					} ).then( (res)=>{
						console.log(res);
					} ).catch( (error)=>{
						console.log(error);
					} )
				}
			}
			// current_change(currentPage){
			// 	// http://127.0.0.1:8093/api/public/findBookByPage/0/8/0
			// 	// http://127.0.0.1:8093/api/public/findBookByPage/1/8/0
			// 	// console.log(currentPage);
			// 	this.axios.get( 'http://127.0.0.1:8093/api/public/findBookByPage/'+(currentPage-1)+'/8/0' ).then( (res)=>{
			// 		// console.log(res);
			// 		this.rightList = res.data.data.books;
			// 	} ).catch( (error)=>{
			// 		console.log(error);
			// 	} )
			// 	this.currentPage = currentPage;
			// },
			// all(){
			// 	this.axios.get( 'api/public/findBookByPage/0/12/0' ).then( (res)=>{
			// 		this.list = res.data.data.books;
			// 		// console.log( this.$Imgurl );
			// 		// console.log( res.data.data.books );
			// 	} ).catch( (error)=>{
			// 		console.log(error);
			// 	} );
			// },
			// btn(val){
			// 	console.log(val);
			// 	this.axios.get( 'api/public/findBookByPage/0/12/'+val+'' ).then( (res)=>{
			// 		this.list = res.data.data.books;
			// 		// console.log( this.$Imgurl );
			// 		// console.log( res.data.data.books );
			// 	} ).catch( (error)=>{
			// 		console.log(error);
			// 	} );
			// }
		}
	}
</script>

<style scoped>
	.el-header{
		/* background-color: pink; */
		line-height: 60px;
	}
	.el-header button:nth-child(1){
		/* margin-left: 0.8%; */
	}
	.el-aside{
		margin-top: 20px;
	}
	.el-header button:nth-child(1){
		margin-left: 8%;
	}
	.el-main{
		position: relative;
		/* background-color: yellowgreen; */
	}
	.detail{
		width: 90%;
		margin: 0 auto;
	}
	.detail .select span{
		line-height: 80px;
	}
	.detail .select span input{
		width: 200px;
		height: 40px;
		border: 0;
		border: 1px solid #d4d4d4;
		border-radius: 6px;
		margin-right: 5px;
		outline: none;
		text-indent: 1em;
	}
	.detail .select span button{
		width: 100px;
		height: 40px;
		border-radius: 6px;
		border: 0;
		background-color: #00ffff;
		color: #1f5f00;
		font-size: 16px;
		cursor: pointer;
	}
	.detail .select span button:hover{
		background-color: red;
		color: white;
	}
	.detail .cen{
		width: 100%;
		float: left;
		background-color: pink;
	}
	.detail .cen .cen_left{
		width: 15%;
		float: left;
	}
	.detail .cen .cen_left ul{
		list-style: none;
		width: 100%;
		line-height: 55px;
		font-size: 18px;
		text-indent: 1em;
	}
	.detail .cen .cen_left ul li{
		width: 100%;
		line-height: 85px;
		border-radius: 6px;
	}
	.detail .cen .cen_left ul li:hover{
		background-color: #ffff7f;
		color: cornflowerblue;
		box-shadow:  0px 0px 5px 1px;
	}
	.detail .cen .cen_left i{
		float: right;
		margin-right: 15px;
	}
	.cen_right{
		width: 100%;
		/* background-color: #ffff7f; */
		float: right;
	}
	.cen_right ol{
		list-style: none;
	}
	.cen_right ol li{
		width: 50%;
		height: 350px;
		margin-bottom: 15px;
		float: left;
	}
	.cen_right ol li img{
		width: 30%;
		/* vertical-align: middle; */
		float: left;
	}
	.cen_right ol li .list{
		width: 40%;
		line-height: 45px;
		text-align: center;
		float: left;
	}
	.cen_right ol li .list button{
		width: 80px;
		height: 35px;
		line-height: 35px;
		border-radius: 6px;
		border: 0;
		background-color: #FFC0CB;
		margin-left: 15px;
		font-size: 16px;
		color: white;
		cursor: pointer;
	}
	.block{
		position: absolute;
		bottom: 0;
	}
	/* .detail .cen .cen_left{
		width: 15%;
		height: 100%;
		display: flex;
		background-color: skyblue;
		cursor: pointer;
	}
	.detail .cen .cen_right{
		width: 85%;
		height: 100%;
		float: right;
		background-color: #FFD700;
		cursor: pointer;
	}
	.detail .cen .cen_left:hover{
		background-color: #ffff7f;
		color: cornflowerblue;
	}
	.detail .cen .cen_left h4{
		width: 50%;
		line-height: 55px;
		font-size: 18px;
		text-indent: 1em;
		float: left;
	}
	.detail .cen .cen_left h4:nth-child(2){
		text-align: right;
		text-indent: 5em;
	} */
</style>
